<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    vue.config.js

    //脚手架的默认配置
    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
       transpileDependencies: true,
       //...
    })

    //老配置
    module.exports = {
       //...
    }

    默认有一套配置规则，添加内容会覆盖默认配置信息，增加配置

    基础配置
    publicPath:"/" 项目打包放到服务器上后，从服务器的根文件下读取文件（html）
              "./" 项目打包放到服务器上后，根据html文件的位置读取相关文件
    outputDir：打包的出口文件夹名称 dist
    assetsDir:把打包的文件放到对应文件夹里 (js、css、img、fonts) 
    indexPath:打包后的html文件的路径和名称
    pages：配置多入口和多出口
    ***lintOnSave: boolean | 'warning' | 'default' | 'error'
    默认：'default'
    'default'/'error':控制台爆红，不会继续编译（弹窗）
    'warning'/true:控制台爆红，继续编译
    false:控制台不爆红，代码继续编译（eslint 失效）
    生产环境：false    开发环境:true/'warning'
    productionSourceMap: true 打包js的时候，是否生成map文件 [代码调试文件]
    runtimeCompiler：false 是否组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右
    transpileDependencies：false  es6--es5 忽略所有 node_modules 中的文件
    想要转 ：值--》数组 ['bfj',"base/index.js"]

    进阶配置
    configureWebpack 增加某些配置项（loader plugins)
    chainWebpack 允许对内部的 webpack 配置进行更细粒度的修改
    css.requireModuleExtension：true
    默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。
    [ext] ----》 *.(css|scss|sass|less|styl(us)?) 
    css.extract： 生产环境下是 true，开发环境下是 false
    是否将组件中的 CSS 提取至一个独立的 CSS 文件中
    css.sourceMap：false
    是否为 CSS 开启 source map
    css.loaderOptions 新增或修改css loader

    ****跨域配置
    开发环境 需要配置 跨域代理服务器 webpack-dev-server
    生产环境 就不需要通过webpack配置跨域代理服务器了，需要用过 nginx/apache
    配置代理服务器

    module.exports = {
      devServer: {
          host:"127.0.0.1",
          port:"8081",
          open:true,
          proxy:{
              "/zhihu":{
                 target:"https://www.zhihu.com"
              },
              "/jianshu":{
                 target:"https://www.jianshu.com",//目标服务器网址
                 ws: true,//使用websocket
                 changeOrigin: true,//是否伪装访问
                 pathRewrite:{//网址重写
                   "/jianshu":""
                 }
              }
          }
      }
  }

  兼容配置
  browerslist:兼容浏览器的
  https://browsersl.ist/#q=%3E+1%25
  https://www.freesion.com/article/90821191237/

  css兼容  添加属性前缀+ browerslist
  postcss-loader + autoprefixer(添加前缀)  
  browerslist(浏览器)

  js兼容
  1.browerslist(浏览器)
  2. babel-loader @vue/cli-plugin-babel/preset(vue版的babel-loader)  es6--es5
  3. class 特色语法处理

  4. Promise API 重写---@babel/polyfill

    下载(webpack)
    yarn add @babel/polyfill   
    main.js中导入
    import '@babel/polyfill';
    直接下载使用，会重写所有的API

    不要直接引入 babel.config.js
    使用 useBuiltIns: 'usage',根据你写的es6代码将使用的API进行重写,其余的不会重写
    module.exports = {
        presets: [
          '@vue/cli-plugin-babel/preset',
          {
            useBuiltIns: 'usage' 
          }
        ]
      }
    
</html>